<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="header">
        <h1>大标题</h1>
        <p>小小的介绍</p>
      </div>
      
      <div class="topnav">
        <a href="#">图片</a>
        <a href="#">视频</a>
        <a href="#">事件</a>
        <a href="#" style="float:right">相关</a>
      </div>
      
      <div class="row">
        <div class="leftcolumn">
          <div class="card">
            <h2>小标题</h2>
            <h5>时间：2022.6.25</h5>
            <div class="fakeimg" style="height:200px;">图片</div>
            <p>内容介绍</p>
          </div>
          <div class="card">
            <h2>另一个小标题</h2>
            <h5>时间：2022.6.26</h5>
            <div class="fakeimg" style="height:200px;">图片</div>
            <p>事件内容</p>
          </div>
        </div>
        <div class="rightcolumn">
          <div class="card">
            <h2>另一件</h2>
            <div class="fakeimg" style="height:100px;">图片</div>
            <p>相关说明</p>
          </div>
          <div class="card">
            <h3>相关热点</h3>
            <div class="fakeimg"><p>图片</p></div>
            <div class="fakeimg"><p>图片</p></div>
            <div class="fakeimg"><p>图片</p></div>
          </div>
          <div class="card">
            <h3>相关其他</h3>
            <p>内容.....</p>
          </div>
        </div>
      </div>
      
      <div class="footer">
        <h2>结尾</h2>
      </div>

      <style>
        * {
          box-sizing: border-box;
        }
        
        body {
          font-family: Arial;
          padding: 10px;
          background: #f1f1f1;
        }
        
        /* 页眉/Blog 标题 */
        .header {
          padding: 30px;
          text-align: center;
          background: white;
        }
        
        .header h1 {
          font-size: 50px;
        }
        
        /* 设置上导航栏的样式 */
        .topnav {
          overflow: hidden;
          background-color: #333;
        }
        
        /* 设置 topnav 链接的样式 */
        .topnav a {
          float: left;
          display: block;
          color: #f2f2f2;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
        }
        
        /* 改变鼠标悬停时的颜色 */
        .topnav a:hover {
          background-color: #ddd;
          color: black;
        }
        
        /* 创建两个不相等的彼此并排的浮动列 */
        /* 左列 */
        .leftcolumn {   
          float: left;
          width: 75%;
        }
        
        /* 右列 */
        .rightcolumn {
          float: left;
          width: 25%;
          background-color: #f1f1f1;
          padding-left: 20px;
        }
        
        /* 伪图像 */
        .fakeimg {
          background-color: #aaa;
          width: 100%;
          padding: 20px;
        }
        
        /* 为文章添加卡片效果 */
        .card {
          background-color: white;
          padding: 20px;
          margin-top: 20px;
        }
        
        /* 清除列之后的浮动 */
        .row:after {
          content: "";
          display: table;
          clear: both;
        }
        
        /* 页脚 */
        .footer {
          padding: 20px;
          text-align: center;
          background: #ddd;
          margin-top: 20px;
        }
        
        /* 响应式布局 - 当屏幕的宽度小于 800 像素时，使两列堆叠而不是并排 */
        @media screen and (max-width: 800px) {
          .leftcolumn, .rightcolumn {   
            width: 100%;
            padding: 0;
          }
        }
        
        /* 响应式布局 - 当屏幕的宽度小于 400 像素时，使导航链接堆叠而不是并排 */
        @media screen and (max-width: 400px) {
          .topnav a {
            float: none;
            width: 100%;
          }
        }
        </style>
</body>
</html>